<template>
  <div class="content">
    <div class="row">
      <div class="col-md-12">
        <div class="box">
          <!-- <div class="box-header">
            <h3 class="box-title">供应商列表</h3>
          </div> -->
          <el-form :inline="true" :model="listQuery" class="demo-form-inline" label-width="75px">
            <el-form-item label="供应商" prop="supplier">
              <el-input v-model.trim="listQuery.supplierName" placeholder="请输入供应商" clearable style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="服务名称" prop="serviceName">
              <el-select v-model="listQuery.serviceID" placeholder="请选择服务名称" clearable>
                <el-option v-for="item in serviceNameOptions" :key="item.serviceID" :label="item.serviceName" :value="item.serviceID" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <button class="btn btn-default" type="button" @click="listSearch">查询</button>
              <button class="btn btn-lg bg-green" type="button" @click="addSupplier">添加</button>
            </el-form-item>
          </el-form>

          <div class="box-body">
            <div class="table-responsive">
              <el-table
                :key="tableKey"
                v-loading="listLoading"
                :data="list"
                border
                fit
                stripe
                highlight-current-row
                style="width: 100%;"
              >
                <el-table-column
                  label="供应商名称"
                  prop="supplierName"
                  align="left"
                  min-width="100">
                </el-table-column>
                <el-table-column
                  label="已提供服务次数"
                  prop="totalOfService"
                  align="left"
                  min-width="50">
                </el-table-column>
                <el-table-column
                  label="备注"
                  prop="remarks"
                  align="left"
                  min-width="160">
                </el-table-column>
                <el-table-column
                  label="状态"
                  align="left"
                  min-width="50">
                  <template slot-scope="scope">
                    <span>{{scope.row.status == 0 ? '正常':'暂停'}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="合同开始时间/合同结束时间"
                  prop="startTime"
                  align="left"
                  width="250"
                  :formatter="dateFormatter">
                </el-table-column>
                <el-table-column
                  label="创建时间"
                  prop="createTime"
                  align="left"
                  :formatter="createTimeFormatter"
                  width="100">
                </el-table-column>
                <!-- :formatter="createTimeFormatter" -->
                <el-table-column
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button class="btn1" @click="handleEditRow(scope.row)" type="text" size="small">修改</el-button>
                    <el-button class="btn1" @click="handleDeleteRow(scope.row)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="box-footer clearfix">
            <!-- 控制分页模块 -->
            <pagination align="right" v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
          </div>
        </div>
      </div>
    </div>
    <!-- 添加/修改 -->
    <el-dialog
      :visible.sync="supplierVisible"
      v-if="supplierVisible"
      :show-close="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="500px"
      style="margin-top: -5vh;"
      >
      <div class="modal-header bg-white">
        <h4 id="myLargeModalLabel" class="modal-title">
          <span class="profile-rounded"><i class="fontello-wrench-outline"></i>
          </span>&nbsp;&nbsp; {{title}}
        </h4>
      </div>
      <el-form ref="supplierVisibleForm" class="clearfix modal-body" :rules="rules" :model="listRow">
        <el-form-item style="flex-shrink: 0;" label="" prop="supplierName">
          <el-input
            v-model="listRow.supplierName"
            :maxlength="200"
            placeholder="供应商名称"
            class="filter-item fl" />
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="" prop="remarks">
          <el-input
            v-model="listRow.remarks"
            :maxlength="200"
            placeholder="备注"
            class="filter-item fl" />
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="" prop="value1">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            :start-placeholder="startPlaceholder"
            :end-placeholder="endPlaceholder"
            @change="changeDate"
            style="width: 100%;">
          </el-date-picker>
        </el-form-item>

        <el-form-item style="flex-shrink: 0;" label="" prop="status">
          <el-select v-model="listRow.status" placeholder="状态" style="width: 100%;">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="" prop="userName">
          <el-input
            v-model="listRow.userName"
            :maxlength="200"
            :disabled="userNameDisable"
            placeholder="供应商账号"
            class="filter-item fl" />
        </el-form-item>
        <el-form-item style="flex-shrink: 0;" label="" prop="password">
          <el-input
            type="password"
            v-model="listRow.password"
            :maxlength="200"
            auto-complete="new-password"
            autocomplete="off"
            placeholder="供应商密码"
            class="filter-item fl" />
        </el-form-item>
        <div class="attribute-operation clearfix fr">
          <button class="btn bg-aqua" type="button" @click="saveSupplier('supplierVisibleForm')">保存</button>
          <button class="btn btn-default close-btn" type="button" @click="closeSupplierVisible">关闭</button>
        </div>
      </el-form>
    </el-dialog>
    <!-- /添加/修改 -->
  </div>
</template>

<script>
import { getPageSupplier, saveSupplier, updateSupplier } from '@/api/supplierManagement/supplier'
import { getService } from '@/api/supplierManagement/project'
import { parseTime } from '@/utils/ruoyi'
import Cookies from "js-cookie";
import Pagination from '@/components/Pagination'

export default {
  name: 'Supplier',
  components: { Pagination },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      title: '添加供应商',
      startPlaceholder: '合同开始时间',
      endPlaceholder: '合同结束时间',
      listLoading: false,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        supplierName: null,
        serviceID: null
      },
      listRow: {
        supplierID: null,
        supplierName: null,
        remarks: null,
        startTime: null,
        endTime: null,
        status: '',
        userName: '',
        password: ''
      },
      value1: '',
      userNameDisable: false, // 供应商账号禁用
      rules: {
        supplierName: [
          { required: true, message: '请输入供应商', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入供应商账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入供应商密码', trigger: 'blur' }
        ],
      },
      supplierVisible: false,
      serviceNameOptions: [],
      statusOptions: [
        {
          label: '正常',
          value: 0
        },
        {
          label: '暂停',
          value: 1
        }
      ]
    }
  },
  created() {
    getService().then(res => {
      this.serviceNameOptions = res
    })
    this.getList()
    // console.log(this.PageInfo)
    // this.list = this.PageInfo.list
    // this.total = this.PageInfo.total
  },
  methods: {
    getList() {
      this.listLoading = true
      getPageSupplier(this.listQuery).then(response => {
        this.listLoading = false
        this.list = response.list;
        this.total = response.total;
      }).catch(() => {
        this.listLoading = false
      })
    },
    reset() {
      this.listQuery = {
        pageNum: 1,
        pageSize: 10,
        supplierName: null,
        serviceName: null
      }
    },
    // 查询
    listSearch() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    // 添加供应商
    addSupplier() {
      this.title = '添加供应商'
      this.listRow = {
        supplierName: null,
        remarks: null,
        startTime: null,
        endTime: null,
        status: '',
        userName: null,
        password: null
      }
      this.value1 = ''
      this.userNameDisable = false
      this.startPlaceholder = '合同开始时间'
      this.endPlaceholder = '合同结束时间'
      this.supplierVisible = true
    },
    // 关闭
    closeSupplierVisible() {
      this.supplierVisible = false
    },

    // 修改
    handleEditRow(row) {
      // console.log(row)
      this.userNameDisable = true
      this.listRow = {
        supplierID: row.supplierID,
        supplierName: row.supplierName,
        remarks: row.remarks,
        startTime: row.startTime,
        endTime: row.endTime,
        status: row.status,
        userName: row.userName,
        password: row.password
      }
      if (!row.startTime&&!row.endTime) {
        this.value1 = ''
        this.startPlaceholder = '合同开始时间'
        this.endPlaceholder = '合同结束时间'
      }else{
        this.listRow.startTime = parseTime(row.startTime, '{y}/{m}/{d}')
        this.listRow.endTime = parseTime(row.endTime, '{y}/{m}/{d}')
        this.value1 = [this.listRow.startTime, this.listRow.endTime]
        this.startPlaceholder = '合同开始时间'
        this.endPlaceholder = '合同结束时间'
      }
      this.title = '修改供应商'
      this.supplierVisible = true
    },
    changeDate(val) {
      if (!val) {
        this.listRow.startTime = null
        this.listRow.endTime = null
      }else{
        this.listRow.startTime = parseTime(val[0], '{y}-{m}-{d}')
        this.listRow.endTime = parseTime(val[1], '{y}-{m}-{d}')
      }
    },
    // 保存
    saveSupplier(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.listRow.supplierID) {
            updateSupplier(this.listRow).then(res=>{
              if (res.status == 'SUCCESS') {
                this.msgSuccess('修改成功')
                this.supplierVisible = false
                this.reset()
                this.getList()
              }else{
                this.msgError(res.content)
              }
            })
          }else{
            saveSupplier(this.listRow).then(res=>{
              if (res.status == 'SUCCESS') {
                this.msgSuccess('添加成功')
                this.supplierVisible = false
                this.reset()
                this.getList()
              }else{
                this.msgError(res.content)
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    // 删除
    handleDeleteRow(row) {
      let params = {
        supplierID: row.supplierID,
        supplierName: row.supplierName,
        remarks: row.remarks,
        startTime: row.startTime,
        endTime: row.endTime,
        status: 2
      }
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          updateSupplier(params).then(res=>{
            this.msgSuccess('删除成功')
            this.reset()
            this.getList()
          })
        })
        .catch(() => {})
    },
    dateFormatter(row) {
      let time = ''
      if (row.startTime&&row.endTime) {
        time = parseTime(row.startTime, '{y}-{m}-{d}') + '--' + parseTime(row.endTime, '{y}-{m}-{d}')
      }
      return time
    },
    createTimeFormatter(row) {
      let time = ''
      if (row.createTime) {
        time = parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}')
      }
      return time
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep{
  .el-table thead{
    color: #888888;
    font-size: 13px;
  }
  .el-table tr{
    color: #888888;
    font-size: 13px;
  }
  .el-table--medium th{
    padding: 8px 0;
  }
  .el-table--medium td{
    padding: 8px 0;
  }
  .btn1{
    color: #37A8AF;
    font-size: 13px;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td{
    background: #f3f4f5;
  }
  .el-pagination{
    padding: 0;
    margin-right: -4px;
  }
  .pagination-container{
    padding: 0;
    margin: 0;
  }
  .el-dialog__header{
    display: none;
  }
  .el-dialog__body{
    padding: 25px 30px 60px;
    font-size: 13px;
    color: #888888;
  }
  .modal-body{
    padding: 20px;
  }
  .el-dialog{
    width: 95%;
    margin-top: 10vh !important;
  }
  .el-form-item{
    margin-bottom: 15px;
  }
  .el-input__inner{
    color: #555555;
    border: 1px solid #cccccc;
  }
}
/deep/.el-form-item__error{
  padding-top: 1px;
}
.demo-form-inline{
  padding: 40px 0 0 35px;
}
.box{
  margin-bottom: 0;
}
.box-body{
  padding-top: 0;
}
.btn-default{
  margin-right: 10px;
}
.close-btn{
  margin-right: 0px;
  margin-left: 10px;
}
</style>
